{% extends "tj3/tj3.html" %}

{% block navigation %}
	<script type="text/javascript">
		$('document').ready(function(){
			$('#id_form-0-start').datepicker();
			$('#id_form-0-end').datepicker();			
		});
	</script>
{% endblock navigation %}

{% block content  %} 

<div class="ui-widget ui-widget-content">
	<h1 class="ui-widget ui-widget-header">{{ resource.first_name|capfirst }} {{resource.last_name|capfirst}}
		<span class="float_right">Log a New Timeoff</span>
	</h1>
	
	<div class="mycontent">
		<form action="." method="post" enctype="multipart/form-data">
		<table>
			{{ timeoff_formset.management_form }}
			{{ timeoff_formset }}
		</table>

		<div class="float_right">
			<input type="submit" name="command" value="Create" class="button" />
		</div>
		</form>
	</div>
	
	<div class="mycontent">
		<h2 class="ui-state-highlight ui-corner-all">History</h2>
		{% for t in timeoffs %}
			<span class="ui-icon ui-icon-scissors" style="float: left; margin-right: .3em;"></span>
			{{t.start}} - {{t.end}}
			<a href="{% url timeoff_delete t.id %}" class="ui-icon ui-icon-trash float_right"></a>
			<blockquote>{{t.memo}}</blockquote>
		{% endfor %}
	</div>
</div>
{% endblock content %}
